<template>
    <div>
        <van-nav-bar
		title="音乐列表选择"
		left-arrow
		@click-left="onClickLeft"
		/>
        <van-card
        :style="{marginTop: index === 0 ? '45px' : '0'}"
        :tag="musicItem.isChecked ? '试听中' : ''"
        :desc="musicItem.singer"
        :title="musicItem.songName"
        :thumb="musicItem.imageURL"
        v-for="(musicItem, index) in musicLists"
        :key="musicItem.id"
        >
        <div slot="footer">
            <van-button size="mini" @click="listeningTest(musicItem)" v-if="musicItem.musicUrl">试听</van-button>
            <van-button size="mini" @click="enterMusic(musicItem)">应用</van-button>
        </div>
        </van-card>

        <audio ref="players"></audio>
    </div>
</template>

<script>
import {Dialog, Toast} from 'vant'
import {addShoppingCart, delShoppingCart, updateMemorialCs, getMemorialCs, saveMemorialCs} from '../api/getData.js'

export default {
    data () {
        return {
            musicLists: [
              {
                musicUrl: '',
                imageURL: '',
                id: 0,
                singer: '无音乐',
                songName: '无音乐',
                isChecked: false
              },
              {
                musicUrl: 'http://qjqw.com/resources/photo/yqf/music/aiwoderen.mp3',
                imageURL: 'http://www.qjqw.com/resources/images/srmy_music_img.png',
                id: 0,
                singer: '九九怀念',
                songName: '爱我的人和我爱的人',
                isChecked: false
              },
              {
                musicUrl: 'http://qjqw.com/resources/photo/yqf/music/365gezhufu.mp3',
                imageURL: 'http://www.qjqw.com/resources/images/srmy_music_img.png',
                id: 1,
                singer: '九九怀念',
                songName: '三百六十五个祝福',
                isChecked: false
              },
              {
                musicUrl: 'http://qjqw.com/resources/photo/yqf/music/qidao.mp3',
                imageURL: 'http://www.qjqw.com/resources/images/srmy_music_img.png',
                id: 2,
                singer: '九九怀念',
                songName: '祈祷',
                isChecked: false
              },
              {
                musicUrl: 'http://qjqw.com/resources/photo/yqf/music/lingerxiangdingdang.mp3',
                imageURL: 'http://www.qjqw.com/resources/images/srmy_music_img.png',
                id: 3,
                singer: '九九怀念',
                songName: '铃儿响叮当',
                isChecked: false
              },
              {
                musicUrl: 'http://qjqw.com/resources/photo/yqf/music/guangdaozhilian.mp3',
                imageURL: 'http://www.qjqw.com/resources/images/srmy_music_img.png',
                id: 4,
                singer: '九九怀念',
                songName: '广岛之恋 ',
                isChecked: false
              },
              {
                musicUrl: 'http://qjqw.com/resources/photo/yqf/music/chongerfei.mp3',
                imageURL: 'http://www.qjqw.com/resources/images/srmy_music_img.png',
                id: 5,
                singer: '九九怀念',
                songName: '虫儿飞',
                isChecked: false
              },
              {
                musicUrl: 'http://qjqw.com/resources/photo/yqf/music/aiyue.mp3',
                imageURL: 'http://www.qjqw.com/resources/images/srmy_music_img.png',
                id: 6,
                singer: '九九怀念',
                songName: '哀乐',
                isChecked: false
              },
              {
                musicUrl: 'http://qjqw.com/resources/photo/yqf/music/2quanyingyue.mp3',
                imageURL: 'http://www.qjqw.com/resources/images/srmy_music_img.png',
                id: 7,
                singer: '九九怀念',
                songName: '二泉映月',
                isChecked: false
              },
              {
                musicUrl: 'http://qjqw.com/resources/photo/yqf/music/liangzhu.mp3',
                imageURL: 'http://www.qjqw.com/resources/images/srmy_music_img.png',
                id: 8,
                singer: '九九怀念',
                songName: '梁祝',
                isChecked: false
              },
              {
                musicUrl: 'http://qjqw.com/resources/photo/yqf/music/guxiangdeyuanfengjing.mp3',
                imageURL: 'http://www.qjqw.com/resources/images/srmy_music_img.png',
                id: 9,
                singer: '九九怀念',
                songName: '故乡的原风景',
                isChecked: false
              },
              {
                musicUrl: 'http://qjqw.com/resources/photo/yqf/music/aidefengxian.mp3',
                imageURL: 'http://www.qjqw.com/resources/images/srmy_music_img.png',
                id: 10,
                singer: '九九怀念',
                songName: '爱的奉献',
                isChecked: false
              },
              {
                musicUrl: 'http://qjqw.com/resources/photo/yqf/music/mtianhuigenghao.mp3',
                imageURL: 'http://www.qjqw.com/resources/images/srmy_music_img.png',
                id: 11,
                singer: '九九怀念',
                songName: '明天会更好',
                isChecked: false
              },
              {
                musicUrl: 'http://qjqw.com/resources/photo/yqf/music/juhuatai.mp3',
                imageURL: 'http://www.qjqw.com/resources/images/srmy_music_img.png',
                id: 12,
                singer: '九九怀念',
                songName: '菊花台',
                isChecked: false
              }
            ],
            currentEditDragItemLists: null,
            bgUrl: 'http://www.qjqw.com/goods//material_files_muyuan/20084555086485.jpg'
        }
    },
    created () {
      getMemorialCs().then(res => {
        this.currentEditDragItemLists = JSON.parse(res.data.object.props)
        this.bgUrl = 'http://www.qjqw.com/goods//material_files_muyuan/20084555086485.jpg'
      })
    },
    methods: {
        onClickLeft () {
          this.$router.go(-1)
        },
        listeningTest (item) {
          this.musicLists.forEach((el, elIndex) => {
            if (item.id === el.id) {
              this.$set(this.musicLists[elIndex], 'isChecked', true)
            } else {
              this.$set(this.musicLists[elIndex], 'isChecked', false)
            }
          })
          this.$nextTick(() => {
            let player = this.$refs.players
            player.src = item.musicUrl
            player.play()
          })
        },
        enterMusic (item) {
          Dialog.confirm({
            title: '确认',
            message: `确认选择歌曲《${item.songName}》？`
          }).then(() => {
            updateMemorialCs(this.bgUrl, item.musicUrl, this.currentEditDragItemLists).then(() => {
              Toast.success('修改音乐成功')
            })
            // this.$store.commit('MUDI_EDIT_MUSIC', {musicUrl: item.musicUrl})
            let _this = this
            setTimeout(() => {
              _this.$router.push('/building-edit')
            }, 1500)
          }).catch(() => {
            // on cancel
          })
        }
    }
}
</script>

<style>

</style>
